<template>
  <div class="login_container">
    <div class="login_box">
      <div class="logo">
        <span>绵竹雨水情系统</span>
        <!-- <img src="../assets/menu-logo.png" alt="" /> -->
      </div>
      <Form
        ref="loginForm"
        label-position="left"
        :model="formValidate"
        :rules="ruleValidate"
      >
        <FormItem prop="username">
          <Input
            size="large"
            v-model="formValidate.username"
            placeholder="请输入手机号"
          ></Input>
        </FormItem>
        <FormItem prop="password">
          <Input
            password
            size="large"
            type="password"
            v-model="formValidate.password"
            placeholder="请输入密码"
          ></Input>
        </FormItem>
        <FormItem>
          <Button
            size="large"
            type="primary"
            style="width: 100%; margin-top: 24px"
            @click="handleSubmit()"
            @keyup.enter.native="handleSubmit"
            :loading="loading"
            >登录</Button
          >
        </FormItem>
      </Form>
    </div>
    <div class="tips">2023 © Caiyun Copyright,All Rights Reserved.</div>
  </div>
</template>

<script setup>
import { login, info } from "common/service/api/user.js";
import dynamicRoute from "common/router/routes/dynamic-route.js";
import useEquipment from "common/store/modules/equipment.js";
import { reactive, ref, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
const equipment = useEquipment();
const ruleValidate = {
  username: [{ required: true, message: "请输入手机号", trigger: "blur" }],
  password: [
    {
      required: true,
      min: 6,
      message: "密码长度最少6位",
      trigger: "change",
    },
  ],
};
const loading = ref(false);
const formValidate = reactive({
  username: "",
  password: "",
});
const hidden = reactive([
  "WarningList",
  "WarningDetails",
  "editSelf",
  "userAdd",
  "roleEdit",
]);
const router = reactive([]);
const routerChildren = (children) => {
  //对子路由的component解析
  children.forEach((v, i) => {
    v.path = v.url;
    v.meta = {
      title: v.name,
      icon: v.icon,
    };
    if (hidden.includes(v.name)) {
      v.hidden = true;
    } else {
      v.hidden = false;
    }
    if (v.children != undefined) {
      v.children = routerChildren(v.children);
    }
  });
  return children;
};
const loginForm = ref(null);
const { proxy } = getCurrentInstance();
const _router = useRouter();
const handleSubmit = () => {
  loginForm.value.validate(async (valid) => {
    if (valid) {
      try {
        loading.value = true;
        let { access_token, token_type } = await login(formValidate);
        localStorage.setItem("tk", access_token);
        localStorage.setItem("us", formValidate.username);
        localStorage.setItem("tk_type", token_type);
        let { result } = await info();
        // 存储设备类型
        const equipmentType = result.equipment_type;
        const pointTypes = result.point_types;

        const equipments = [
          {
            display_name: "水文站",
            icon: require("common/assets/19.png"),
          },
          {
            display_name: "绵竹雨量站",
            icon: require("common/assets/22.png"),
          },
          {
            display_name: "水位预警站",
            icon: require("common/assets/18.png"),
          },
          {
            display_name: "摄像头",
            icon: require("common/assets/15.png"),
          },
          {
            display_name: "无线预警广播",
            icon: require("common/assets/21.png"),
          },
        ];
        equipmentType.forEach((item) => {
          const res = equipments.find(
            (v) => item.display_name === v.display_name
          );
        });
        // 摄像头特殊处理
        equipmentType.push({
          display_name: "摄像头",
          icon: require("common/assets/15.png"),
        });
        // 保存设备类型
        equipment.setEquipmentType(equipmentType);
        // 保存点位类型
        equipment.setPointType(pointTypes);

        // console.log(result.menus.slice(1))
        localStorage.setItem("adcode", result.adcode);
        // 存储设备类型数据
        result.menus.slice(1).forEach((v) => {
          v.path = v.url;
          v.redirect = "/map";
          v.children = routerChildren(v.children);
          router.push(v); //添加
        });
        localStorage.setItem("result", JSON.stringify(result.menus.slice(1)));
        // 后台获取动态路由后传入，目前先用本地路由
        // localStorage.setItem('routers', JSON.stringify(router));
        localStorage.setItem("routers", JSON.stringify(dynamicRoute));
        proxy.$ElMessage.success("登录成功!");
        localStorage.setItem("point_types", JSON.stringify(result.point_types));
        _router.push("/home");
      } catch (error) {
        proxy.$ElMessage.error("失败!");
      } finally {
        loading.value = false;
      }
    }
  });
};
</script>

<style lang="scss" scoped>
.login_container {
  width: 100%;
  height: 100vh;
  background: url("common/assets/background.png") 100%;
  position: relative;

  .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #303133;
    font-weight: bold;

    img {
      height: 70px;
      margin-left: 24px;
    }

    margin-bottom: 48px;
  }

  .login_box {
    width: 450px;
    height: 420px;
    background: #fff;
    padding: 24px 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 12px;
  }

  .tips {
    width: 100%;
    position: absolute;
    bottom: 36px;
    text-align: center;
    color: #fff;
  }
}
</style>
